<template>
    <view class="container">
        <z-paging
            ref="paging"
            :scroll-with-animation="true"
        >
            <template #top>
                <uni-search-bar
                    placeholder="搜索好友"
                    readonly
                    cancelButton="none"
                    bgColor="#fff"
                    @click="goto('/pagesFriend/search/index')"
                />
            </template>

            <view class="content-wrap">
                <TridentCellItem v-for="(item, index) in menus" :key="index" :item="item"/>
            </view>
        </z-paging>
    </view>
</template>

<script lang="ts" setup>
import { goto } from '@/utils/tools'
import { reactive } from 'vue'
const menus = reactive([
    {
        icon: 'icon--radar',
        icon_bg_color: '#6567EE',
        title: '雷达加好友',
        desc: '添加身边的好友'
    },
    {
        icon: 'icon-mianduimianjianqun',
        icon_bg_color: '#1783EC',
        title: '面对面建群',
        desc: '与身边的朋友进入同一个群聊'
    },
    {
        icon: 'icon-saoyisao',
        icon_bg_color: '#08BF60',
        title: '扫一扫',
        desc: '扫描二维码'
    },
    {
        icon: 'icon-xinpengyou',
        icon_bg_color: '#F69E3D',
        title: '手机联系人',
        desc: '添加或者邀请通讯录中的好友'
    }
])
</script>

<style scoped lang="scss">

</style>